<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="/js/qs.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style>
        .el-input {
            width: 340px;
        }
        .input-with-select .el-input-group__prepend {
            background-color: #fff;
        }
    </style>
</head>
<div id="app">
    <!--查询打印机-->
    <div style="margin-top: 15px;">
        <el-input placeholder="请输入打印机编号" v-model="printerNum" class="input-with-select el-input">
            <el-button @click="searchPrinter" slot="append" icon="el-icon-search"></el-button>
        </el-input>
    </div>

    <!--添加和删除-->
    <el-button @click="add">添加打印机</el-button>
    <el-button @click="branchRemove">批量删除</el-button>
    <el-dialog title="添加激光打印机" :visible.sync="dialogFormVisible" @close="closeDialog">
        <el-form :model="currentPrinter">
            <span style="color: red">{{error}}</span>
            <el-form-item label="打印机编号">
                <el-input v-model="currentPrinter.pNum" @blur="exist" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="描述">
                <el-input v-model="currentPrinter.pDescrib" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="IP地址">
                <el-input v-model="currentPrinter.pIp" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="服务器" >
                <el-input v-model="currentPrinter.pServer" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="责任产线">
                <el-select v-model="currentPrinter.pLine" placeholder="请选择负责人">
                    <el-option v-for="line in lines" :label="line.productionName" :value="line.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="currentPrinter.pRemark" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="save">确 定</el-button>
        </div>
    </el-dialog>


    <!--所有打印机可选表格-->
    <template>
        <el-table
                ref="multipleTable"
                :data="printers"
                @selection-change="handleSelectionChange"
                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="120">
            </el-table-column>
            <el-table-column
                    label="打印机编号"
                    width="120">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.pNum }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="服务器"
                    width="120">
                <template slot-scope="scope">
                    <span style="margin-left: 2px">{{ scope.row.pServer }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="描述"
                    width="120">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.pDescrib }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="IP地址"
                    width="120">
                <template slot-scope="scope">
                    <span style="margin-left: 2px">{{scope.row.pIp}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="责任产线"
                    width="120">
                <template slot-scope="scope">
                    <span style="margin-left: 2px">{{scope.row.productionName}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="备注"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 2px">{{ scope.row.pRemark }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                dialogFormVisible:false,
                printerNum:"",
                color:"",
                error:"",
                lines:[],
                printers:[],
                currentPrinter:{},
                multipleSelection:[],
                delId:[],
            }
        },
        methods:{
            loadLines(){
                axios.get("/produce/lines")
                    .then(res=>{
                        this.lines=res.data;
                    })
            },
            exist(){
            // 判断该打印机名称是否已存在
                axios.get("/produce/pNum?pNum="+this.currentPrinter.pNum)
                .then(res=>{
                    if (res.data!="ok"&&this.currentPrinter.id==null) {
                        this.error="编号已存在";
                    }else {
                        this.error="";
                    }
                })
            },
            branchRemove(){
                console.log(this.delId);
            //批量删除
                axios.delete("/produce/printers?pNums="+this.delId)
                .then(res=>{
                    if (res.data==""){
                        this.$message("已经批量删除");
                        this.loadPrinters();
                    }else {
                        alert(res.data.substr(0,res.data.length-1)+"正在使用，不可删除");
                        this.loadPrinters();
                    }
                })
            },
            add(){
                this.dialogFormVisible=true;
                this.error="";
                this.currentPrinter={};
            },
            loadPrinters(){
                axios.get("/produce/printers")
                .then(res=>{
                    this.printers=res.data;
                    console.log(this.printers)
                })
            },
            searchPrinter(){
                axios.get("/produce/printer?pNum="+this.printerNum)
                .then(res=>{
                    this.printers=res.data;
                })
            },
            handleSelectionChange(val) {
                let arr = new Array();
                for (let i=0;i<val.length;i++){
                    arr.push(val[i].pNum);
                }
                this.delId=arr;
            },
            handleEdit(index,row){
                this.error="";
                this.currentPrinter=JSON.parse(JSON.stringify(row));
                this.dialogFormVisible=true;
                console.log(this.currentPrinter.id);
            },
            handleDelete(index,row){
                if (confirm("您确定要删除此打印机吗?")){
                    console.log(row);
                    axios.delete("/produce/printer",{data:row})
                    .then(res=>{
                        if (res.data=="ok") {
                            this.$message("删除成功");
                            this.loadPrinters();
                        }else {
                            alert("请修改订单打印机，才可删除");
                        }
                    })
                }
            },
            save(){
                console.log(this.currentPrinter)
                this.dialogFormVisible=false;
                if (this.currentPrinter.id==null){
                    //添加
                    axios.post("/produce/printer",this.currentPrinter)
                        .then(res=>{
                            if (res.data=="ok") {
                                this.loadPrinters();
                                this.$message("添加成功")
                            }else {
                                alert("编号已存在，请更换");
                            }
                        })
                }else {
                    //更新
                    axios.put("/produce/printer",this.currentPrinter)
                        .then(res=>{
                            if (res.data=="ok") {
                                this.loadPrinters();
                                this.$message("更新成功");
                            }else {
                                alert("编号不存在，建议不要修改编号");
                            }
                        })
                }
                this.error="";
                this.currentPrinter={};
            }
        },
        mounted(){
            this.loadLines();
            this.loadPrinters();
        }
    })
</script>
</html>